$(document).ready(function(){
    // 绑定用户头像点击事件
    $('.user-avatar').click(function (event){
        event.stopPropagation(); // 阻止事件冒泡到父元素
        $(this).next('.dropdown-menu').toggle(); // 切换显示/隐藏状态
    });

    // 点击菜单外的区域，隐藏菜单
    $(document).click(function (){
        $('.dropdown-menu').hide();
    });

    // 阻止菜单内元素的点击事件，关闭菜单自身
    $('.dropdown-menu').click(function (event){
        event.stopPropagation();
    });

    // 全局侧边栏菜单的折叠与展开
    // 从sessionStorage中获取当前菜单的折叠状态，并初始化菜单状态
    let menuStates = JSON.parse(sessionStorage.getItem('menuStates')) || {};
    // 遍历所有菜单项，根据sessionStorage中的状态设置菜单的显示/隐藏状态
    $('.submenu').each(function () {
        const $this = $(this);
        // 根据sessionStorage中的状态，设置菜单的显示/隐藏状态
        if (menuStates[$this.attr('id')] === true) {
            $this.show();
            $this.prev('a').addClass('expanded');
        } else {
            $this.hide();
            $this.prev('a').removeClass('expanded');
        }
    });

    // 绑定菜单点击事件
    $('.sidebar a').on('click', function (event) {
        // 如果点击的是带有子菜单的菜单项
        if ($(this).next('.submenu').length > 0) {
            event.preventDefault(); // 阻止默认的a标签跳转行为
            const $submenu = $(this).next('.submenu'); // 获取子菜单元素
            // 切换子菜单显示/隐藏状态，动画效果300毫秒，这是异步操作
            $submenu.slideToggle(300, function () {
                const menuId = $submenu.attr('id'); // 获取菜单的ID
                menuStates[menuId] = $submenu.is(':visible'); // 获取菜单是否可见
                $(this).toggleClass('expanded');
                sessionStorage.setItem('menuStates', JSON.stringify(menuStates)); // 将菜单折叠状态保存到sessionStorage
            });
        }
    });
});





